<template>
  <div>
    <el-form
      :inline="true"
      style="display: flex; padding-top: 10px; margin-left: 10px"
    >
      <el-form-item label="家庭组" prop="region">
        <el-select
          v-model="ruleForm.Family"
          disabled
          filterable
          placeholder="请选家庭组"
          style="margin: 2px"
          @change="FamilyChange"
        >
          <el-option
            v-for="item in FamilyOptions"
            :key="item.group_id"
            :label="item.group_name"
            :value="item.group_id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="学员姓名" prop="region">
        <el-select
          v-model="ruleForm.user"
          disabled
          placeholder="请选学员姓名"
          style="margin: 2px"
          @change="userChange"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.id"
            :label="item.nick_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="课程" prop="region">
        <el-select
          v-model="ruleForm.goods_name"
          disabled
          placeholder="请选商品"
          style="margin: 2px"
        >
          <el-option
            v-for="items in commodityOptions"
            :key="items.goods_id"
            :label="items.goods_name"
            :value="items.goods_id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="时间">
        <el-date-picker
          v-model="ruleForm.item"
          disabled
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          type="daterange"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
    </el-form>
    <el-button
      disabled
      style="margin-left: 10px"
      type="primary"
      @click="addTag"
    >
      添加问题
    </el-button>

    <!-- <el-button type="primary" @click="sbu1">保存1</el-button> -->

    <!--  -->
    <el-button @click="goBack">返回</el-button>
    <el-table
      :key="'a' + randomKey"
      :data="tableDataTag"
      style="width: 100%; margin-top: 10px; margin-left: 10px"
    >
      <el-table-column label="问题" prop="">
        <template slot-scope="scoped">
          <el-tag
            v-for="(tag, index) in scoped.row.dynamicTags"
            :key="index"
            :disable-transitions="false"
          >
            {{ scoped.$index + 1 }}.{{ index + 1 }} {{ tag.tag }}
          </el-tag>
          <!-- @blur="tagBlur(scoped.row)" -->
          <el-select
            v-if="scoped.row.inputVisible"
            v-model="scoped.row.inputValue"
            allow-create
            class="ele-block"
            filterable
            placeholder="请选择"
            remote
            reserve-keyword
            style="margin-left: 5px"
          >
            <el-option
              v-for="(item, index) in tagOperatorList"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :data="tagD"
      style="width: 100%; margin-top: 10px; margin-left: 10px"
    >
      <el-table-column label="主要问题备注" prop="">
        <template slot-scope="scoped">
          <el-input
            v-model="scoped.row.value"
            disabled
            placeholder="请输入内容"
            :rows="2"
            type="textarea"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 训练策略 -->
    <el-table
      :key="'b' + randomKey"
      :cell-style="{ 'vertical-align': 'top' }"
      :data="tableDatastrategy"
      style="width: 100%; margin-top: 10px; margin-left: 10px"
    >
      <el-table-column label="训练策略" prop="" width="400">
        <template slot-scope="scoped">
          <span v-for="(items, index) in scoped.row.dynamicTags" :key="index">
            <el-tag style="margin-left: 3px">
              {{ scoped.$index + 1 }}.{{ index + 1 }} {{ items.tag }}
            </el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="内容" prop="">
        <template slot-scope="scoped">
          <div v-for="(k, index) in scoped.row.dynamicStrategy" :key="index">
            <el-tag style="margin-top: 10px">
              {{ index + 1 }}.{{ k.strategy_text }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 学生目标   :key="Math.random()"  -->
    <el-table
      :key="'c' + randomKey"
      :cell-style="{ 'vertical-align': 'top' }"
      :data="tableDataTarget"
      style="width: 100%; margin-top: 10px; margin-left: 10px"
    >
      <el-table-column label="训练目标" prop="" width="400">
        <template slot-scope="scoped">
          <span v-for="(items, index) in scoped.row.dynamicTags" :key="index">
            <el-tag style="margin-left: 3px">
              {{ scoped.$index + 1 }}.{{ index + 1 }} {{ items.tag }}
            </el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="内容" prop="">
        <template slot-scope="scoped">
          <div v-for="(k, index) in scoped.row.dynamicStrategy" :key="index">
            <el-tag style="margin-top: 10px">
              {{ index + 1 }}.{{ k.objectives_text }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 活动设计  -->

    <el-table
      :key="'d' + randomKey"
      border
      :data="tableDataDesign"
      :default-expand-all="true"
      style="width: 100%; margin-left: 10px"
      tooltip-effect="dark"
    >
      >
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="width: 95%; margin-left: 5%">
            <el-table
              ref="multipleTable"
              :cell-style="{ 'vertical-align': 'top' }"
              :data="props.row.dynamicStrategy"
              row-key="id"
            >
              >
              <el-table-column
                label="学习目标"
                prop="objectives_text"
                width="400"
              />
              <el-table-column label="内容" prop="">
                <template slot-scope="scoped">
                  <div v-for="(k, index) in scoped.row.data" :key="index">
                    <el-tag style="margin-top: 10px">
                      {{ index + 1 }}.{{
                        k.activity_name + ':' + k.activity_content
                      }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="问题名称" prop="tagName" />
    </el-table>

    <!-- 教具   :key="Math.random()"  -->
    <el-table
      :key="'e' + randomKey"
      :cell-style="{ 'vertical-align': 'top' }"
      :data="tableDataTeaching"
      style="width: 100%; margin-top: 10px; margin-left: 10px"
    >
      <el-table-column label="活动名称" prop="activity_name" width="400" />
      <el-table-column label="教具" prop="">
        <template slot-scope="scoped">
          <div v-for="(k, index) in scoped.row.data" :key="index">
            <el-tag style="margin-top: 10px">
              {{ index + 1 }}.{{ k.teaching_name }}{{ '__数量：' + k.num }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {
    eduSearch,
    eduAddTag,
    searchStrategy,
    addStrategy,
    searchObjectives,
    addObjectives,
    searchActivity,
    addActivity,
    addPrepare,
    editPrepare,
    searchTeaching,
    addTeaching,
  } from '@/api/edu'

  import { getCusGroup } from '@/api/gustomerGroup'
  import { getCustomerCard } from '@/api/reservation'
  import { getGoodsList } from '@/api/public'

  export default {
    components: {},
    props: {
      datas: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        ruleForm: {
          Family: '',
          user: '',
          goods_name: '',
          item: '',
        },
        tagD: [
          {
            name: '主要问题备注',
            value: '',
          },
        ],
        randomKey: Math.random(),
        StrategyData: {}, //储存策略的临时数据
        StrategyInput: '', //策略名称
        FamilyOptions: [], // 家庭组
        ActivityDialogVisible: false,
        StrategykDialogVisible: false, // 添加策略
        tagOperatorList: [],
        strategyOperatorList: [], // 策略临时储存列表
        targetOperatorList: [], // 目标临时储存列表
        userOptions: [], // 用户
        goodsOptions: [], //卡
        commodityOptions: [], //课程
        tableDataTag: [], //
        tableDatastrategy: [], // 训练策略
        tableDataTarget: [], //学生目标
        targetData: {}, //储存目标的临时数据
        targetInput: '', //目标名称
        targetDialogVisible: false, //添加目标
        tableDataDesign: [], // 设计
        tableDataTeaching: [], //教具

        ActivityOperatorList: [],
        DesignData: [], // 临时储存设计
        tDesignInput: '', //活动名称
        activity_content: '', //活动内容
        DesignDialogVisible: false, // 添加设计
        TeachingDialogVisible: false, // 添加设计
        teaching_name: '', //教具名称
        num: '', //教具数量
        teachingOperatorList: [], // 教具数量搜索
        TeachingData: [], //教具的临时数据
      }
    },
    watch: {},
    mounted() {
      // 初始化 方法
      getCusGroup().then((res) => {
        // 家庭组 list
        this.FamilyOptions = res.data
        if (this.datas.group_id) {
          res.data.forEach((e) => {
            if (e.group_id == this.datas.group_id) {
              this.userOptions = e.child
            }
          })
        }
      })
      const data = {
        goods_type: 'curriculum',
      }
      getGoodsList(data).then((res) => {
        // 商品 list
        this.commodityOptions = res.data
      })
      if (this.datas.id) {
        const data = {
          id: this.datas.id,
        }
        editPrepare(data).then((e) => {
          // 备课详情
          const tableDataTag = JSON.parse(e.data.option_json)
          tableDataTag.forEach((e) => {
            e.dynamicTags = []
            e.option.forEach((k) => {
              e.dynamicTags.push({
                id: k.option_id,
                tag: k.title,
              })
            })
            e.inputValue = ''
            e.inputVisible = false
            e.parent_id = e.option[e.option.length - 1].option_id
            delete e.option
          })
          this.tableDataTag = tableDataTag
          const tableDatastrategy = JSON.parse(e.data.strategy)
          tableDatastrategy.forEach((e) => {
            // console.log(e)
            e.inputValue = ''
            e.inputVisible = false
            e.dynamicTags = []
            e.dynamicStrategy = []
            e.parent_id = e.option[e.option.length - 1].option_id
            e.option.forEach((k) => {
              e.dynamicTags.push({
                id: k.option_id,
                tag: k.title,
              })
            })
            e.strategy.forEach((j) => {
              e.dynamicStrategy.push({
                id: j.strategy_id,
                strategy_text: j.title,
              })
            })
            delete e.option
            delete e.strategy
          })
          this.tableDatastrategy = tableDatastrategy
          const tableDataTarget = JSON.parse(e.data.objectives)
          tableDataTarget.forEach((e) => {
            e.inputValue = ''
            e.inputVisible = false
            e.parent_id = e.option[e.option.length - 1].option_id
            e.dynamicTags = []
            e.dynamicStrategy = []
            e.option.forEach((k) => {
              e.dynamicTags.push({
                id: k.option_id,
                tag: k.title,
              })
            })
            e.objectives.forEach((j) => {
              e.dynamicStrategy.push({
                id: j.objectives_id,
                objectives_text: j.title,
              })
            })
            delete e.option
            delete e.objectives
          })
          this.tableDataTarget = tableDataTarget

          const tableDataDesign = JSON.parse(e.data.activity)
          tableDataDesign.forEach((e) => {
            e.tagName = e.option_title
            e.dynamicStrategy = []
            e.dynamicTags = []
            e.activity.forEach((k) => {
              e.dynamicStrategy.push({
                inputValue: '',
                objectives_text: k.objectives_text,
                id: k.objectives_id,
                data: k.data,
              })
            })
            e.option.forEach((j) => {
              e.dynamicTags.push({
                id: j.option_id,
                tag: j.title,
              })
            })
            delete e.option
            delete e.activity
            delete e.option_title
          })
          this.tableDataDesign = tableDataDesign
          this.ruleForm.Family = e.data.group_id
          // this.FamilyOptions.forEach((res) => {
          //   console.log(res)
          //   if (res.group_id == e.data.group_id) {
          //     this.userOptions = res.child
          //   }
          // })
          this.tableDataTeaching = JSON.parse(e.data.teaching)
          this.tagD[0].value = e.data.option_remark
          this.ruleForm.user = e.data.member_id
          this.ruleForm.goods_name = e.data.goods_id
          this.ruleForm.item = [e.data.start_date, e.data.end_date]
        })
      }
    },
    methods: {
      addTag() {
        //标签
        this.tableDataTag.push({
          dynamicTags: [],
          inputVisible: true,
          inputValue: '',
          parent_id: 0,
        })
      },
      addStrategyk(e) {
        if (!e.dynamicStrategy) {
          e.dynamicStrategy = []
        }
        this.StrategyData = e
        this.StrategyInput = ''
        this.StrategykDialogVisible = true
        // 添加策略
      },
      addTarget(e) {
        if (!e.dynamicStrategy) {
          e.dynamicStrategy = []
        }
        this.targetData = e
        this.targetInput = ''
        this.targetDialogVisible = true
      },
      addTeaching(e) {
        this.teaching_name = ''
        this.num = ''
        this.TeachingData = e
        this.TeachingDialogVisible = true
      },
      addDesign(e) {
        this.DesignData = e
        this.tDesignInput = ''
        this.activity_content = ''
        this.DesignDialogVisible = true
      },
      handleCloseStrategy(r, i, name) {
        r.splice(i, 1)
        this.randomKey = Math.random()
        console.log(name)
        if (name == 'xxmb') {
          const tableDataActivitys = JSON.parse(
            JSON.stringify(this.tableDataTarget)
          )

          tableDataActivitys.forEach((k, i) => {
            console.log(k, i)
            if (k.dynamicStrategy) {
              k.tagName = ''
              k.dynamicTags.forEach((i) => {
                if (k.tagName == '') {
                  k.tagName = i.tag
                } else {
                  k.tagName = k.tagName + '-' + i.tag
                }
              })
              k.dynamicStrategy.forEach((j) => {
                j.data = []
                j.inputValue = ''
              })
            } else {
              //
            }
          })
          this.tableDataDesign = tableDataActivitys
          //
          this.tableDataTeaching = []
          const tableDataTeaching = JSON.parse(
            JSON.stringify(this.tableDataDesign)
          )
          tableDataTeaching.forEach((e) => {
            e.dynamicStrategy.forEach((j) => {
              j.data.forEach((o) => {
                o.data = []
                o.inputValue = ''
                this.tableDataTeaching.push(o)
              })
            })
          })
        }
        if (name == 'hdsj') {
          this.tableDataTeaching = []
          const tableDataTeaching = JSON.parse(
            JSON.stringify(this.tableDataDesign)
          )
          tableDataTeaching.forEach((e) => {
            e.dynamicStrategy.forEach((j) => {
              j.data.forEach((o) => {
                o.data = []
                o.inputValue = ''
                this.tableDataTeaching.push(o)
              })
            })
          })
        }
      },
      tagClose(r, i) {
        console.log(r, i)
        r.splice(i, r.length - i)

        this.tableDatastrategy = JSON.parse(JSON.stringify(this.tableDataTag))
        this.tableDataTarget = JSON.parse(JSON.stringify(this.tableDataTag))
        this.tableDataDesign = []
      },

      goBack() {
        // 返回
        this.$emit('showMain')
      },

      addRemoteMccNameTag(query, r) {
        console.log(r)
        //标签 搜索
        // const num = r.dynamicTags.length - 1
        // const data = {
        //   tag: query,
        //   parent_id: r.dynamicTags[num].id,
        // }

        // eduSearch(data).then((e) => {
        //   this.tagOperatorList = e.data
        // })
        const num = r.dynamicTags.length - 1
        if (num < 0) {
          const data = {
            tag: query,
            parent_id: 0,
          }
          eduSearch(data).then((e) => {
            this.tagOperatorList = e.data
          })
        } else {
          const num = r.dynamicTags.length - 1
          const data = {
            tag: query,
            parent_id: r.dynamicTags[num].id,
          }
          eduSearch(data).then((e) => {
            this.tagOperatorList = e.data
          })
        }
      },
      focusTag(r) {
        const num = r.dynamicTags.length - 1
        if (num < 0) {
          const data = {
            parent_id: 0,
          }
          eduSearch(data).then((e) => {
            this.tagOperatorList = e.data
          })
        } else {
          const num = r.dynamicTags.length - 1
          const data = {
            parent_id: r.dynamicTags[num].id,
          }
          eduSearch(data).then((e) => {
            this.tagOperatorList = e.data
          })
        }
      },
      tagBlur(e) {
        e.inputVisible = false
      },
      addRemoteMccNamestrategy(query, r) {
        //遍历 option id
        const aaa = JSON.parse(JSON.stringify(r.dynamicTags))
        const k = []
        aaa.forEach((a) => {
          k.push(a.id)
        })
        //策略搜索
        const data = {
          title: query,
          option_id: JSON.stringify(k),
        }
        searchStrategy(data).then((e) => {
          this.strategyOperatorList = e.data
        })
      },
      addRemoteMccNameteaching(query, r) {
        console.log(query, r)
        // 教具搜索
      },
      addRemoteMccNameTarget(query, r) {
        const aaa = JSON.parse(JSON.stringify(r.dynamicTags))
        const k = []
        aaa.forEach((a) => {
          k.push(a.id)
        })
        //策略搜索
        const data = {
          title: query,
          option_id: JSON.stringify(k),
        }
        searchObjectives(data).then((e) => {
          this.targetOperatorList = e.data
        })
      },
      addRemoteMccNameDesign(query, r) {
        console.log(query, r)
        // const aaa = JSON.parse(JSON.stringify(r.dynamicTags))
        // const k = []
        // aaa.forEach((a) => {
        //   k.push(a.id)
        // })
        // //策略搜索
        // const data = {
        //   title: query,
        //   option_id:r.id,
        // }
        // searchObjectives(data).then((e) => {
        //   this.targetOperatorList = e.data
        // })
      },
      focusDesign(r) {
        const data = {
          objectives_id: r.id,
        }
        searchActivity(data).then((e) => {
          this.ActivityOperatorList = e.data
        })
      },

      Strategysbut(r, k) {
        //遍历 option id

        const aaa = JSON.parse(JSON.stringify(k.dynamicTags))
        const c = []
        aaa.forEach((a) => {
          c.push(a.id)
        })
        // 添加策略
        const data = {
          title: r,
          option_id: JSON.stringify(c),
        }
        addStrategy(data).then((e) => {
          this.tableDatastrategy.forEach((j) => {
            if (j.parent_id == k.parent_id) {
              j.dynamicStrategy.push({
                id: e.data.id,
                strategy_text: e.data.strategy_text,
              })
              this.StrategykDialogVisible = false
            }
          })
        })

        // 添加策略
      },
      targetSbut(r, k) {
        // 添加目标
        //遍历 option id

        const aaa = JSON.parse(JSON.stringify(k.dynamicTags))
        const c = []
        aaa.forEach((a) => {
          c.push(a.id)
        })
        // 添加目标
        const data = {
          title: r,
          option_id: JSON.stringify(c),
        }
        addObjectives(data).then((e) => {
          k.dynamicStrategy.push({
            id: e.data.id,
            objectives_text: e.data.objectives_text,
          })
          this.targetDialogVisible = false
          // this.tableDataDesign = JSON.stringify(this.tableDataTarget)
          // JSON.parse(JSON.stringify(this.tableDataTarget))
          const tableDataActivitys = JSON.parse(
            JSON.stringify(this.tableDataTarget)
          )

          tableDataActivitys.forEach((k, i) => {
            console.log(k, i)
            if (k.dynamicStrategy) {
              k.tagName = ''
              k.dynamicTags.forEach((i) => {
                if (k.tagName == '') {
                  k.tagName = i.tag
                } else {
                  k.tagName = k.tagName + '-' + i.tag
                }
              })
              k.dynamicStrategy.forEach((j) => {
                j.data = []
                j.inputValue = ''
              })
            } else {
              //
            }
          })
          this.tableDataDesign = tableDataActivitys

          this.targetOperatorList = []
        })
      },
      tDesignSbut(r, k, j) {
        console.log(k)
        const data = {
          activity_name: r,
          activity_content: j,
          objectives_id: k.id,
        }
        addActivity(data).then((e) => {
          k.data.push({
            id: e.data.id,
            activity_name: e.data.activity_name,
            activity_content: e.data.activity_content,
          })
          this.DesignDialogVisible = false
        })
      },
      TeachingSbut(r, k, j) {
        console.log(k)
        const data = {
          teaching_name: r,
          num: j,
          activity_id: k.id,
        }
        addTeaching(data).then((e) => {
          k.data.push({
            id: e.data.id,
            num: e.data.num,
            teaching_name: e.data.teaching_name,
          })
          this.TeachingDialogVisible = false
        })
      },
      selectChangestrategy(r, e) {
        // 选中事件策略
        // console.log(r, e)
        if (!e.dynamicStrategy) {
          e.dynamicStrategy = []
        }
        this.strategyOperatorList.forEach((k) => {
          // console.log(k)

          if (k.id == r) {
            e.dynamicStrategy.push({
              id: k.id,
              strategy_text: k.strategy_text,
            })
            e.inputValue = ''
          }
        })
        this.strategyOperatorList = []
      },
      selectChangeTeaching(r, e) {
        this.teachingOperatorList.forEach((k) => {
          if (k.id == r) {
            e.data.push(k)
          }
        })
        this.teachingOperatorList = []
        e.inputValue = ''
      },
      selectChangeTarget(r, e) {
        // 目标选中事件
        // console.log(r, e)
        if (!e.dynamicStrategy) {
          e.dynamicStrategy = []
        }
        this.targetOperatorList.forEach((k) => {
          // console.log(k.id)
          // console.log(r)
          if (k.id == r) {
            e.dynamicStrategy.push({
              id: k.id,
              objectives_text: k.objectives_text,
            })
            e.inputValue = ''
          }
        })

        const tableDataActivitys = JSON.parse(
          JSON.stringify(this.tableDataTarget)
        )

        tableDataActivitys.forEach((k) => {
          if (k.dynamicStrategy) {
            k.tagName = ''
            k.dynamicTags.forEach((i) => {
              if (k.tagName == '') {
                k.tagName = i.tag
              } else {
                k.tagName = k.tagName + '-' + i.tag
              }
            })
            k.dynamicStrategy.forEach((j) => {
              j.data = []
              j.inputValue = ''
            })
          }
        })
        this.tableDataDesign = tableDataActivitys
        // console.log(this.tableDataDesign)
        this.targetOperatorList = []
      },
      selectChangeDesign(r, e) {
        this.ActivityOperatorList.forEach((k) => {
          if (k.id == r) {
            e.data.push({
              id: k.id,
              activity_name: k.activity_name,
              activity_content: k.activity_content,
            })
            e.inputValue = ''
          }
        })
        this.ActivityOperatorList = []
        this.tableDataTeaching = []
        const tableDataTeaching = JSON.parse(
          JSON.stringify(this.tableDataDesign)
        )
        tableDataTeaching.forEach((e) => {
          e.dynamicStrategy.forEach((j) => {
            j.data.forEach((o) => {
              o.data = []
              o.inputValue = ''
              this.tableDataTeaching.push(o)
            })
          })
        })
        console.log(this.tableDataTeaching)
      },
      focusTarget(r) {
        const aaa = JSON.parse(JSON.stringify(r.dynamicTags))
        const k = []
        aaa.forEach((a) => {
          k.push(a.id)
        })
        // console.log(r)
        //目标触发事件 搜索
        const data = {
          option_id: JSON.stringify(k),
        }
        searchObjectives(data).then((e) => {
          this.targetOperatorList = e.data
        })
      },
      focusSelect(r) {
        const aaa = JSON.parse(JSON.stringify(r.dynamicTags))
        const k = []
        aaa.forEach((a) => {
          k.push(a.id)
        })
        // console.log(r)
        //策略触发事件 搜索
        const data = {
          option_id: JSON.stringify(k),
        }
        searchStrategy(data).then((e) => {
          this.strategyOperatorList = e.data
        })
      },
      focusTeaching(r) {
        const data = {
          activity_id: r.id,
        }
        searchTeaching(data).then((e) => {
          console.log(e)
          this.teachingOperatorList = e.data
        })
      },

      selectChange(r, e) {
        if (typeof r == 'number') {
          this.tagOperatorList.forEach((j) => {
            if (j.id == r) {
              let inputValue = j.title
              if (inputValue) {
                e.dynamicTags.push({
                  tag: inputValue,
                  id: j.id,
                })
              }
              e.inputVisible = false
              e.inputValue = ''
              e.parent_id = j.id
              this.tagOperatorList = []
            }
          })
          this.tableDatastrategy = JSON.parse(JSON.stringify(this.tableDataTag))
          this.tableDataTarget = JSON.parse(JSON.stringify(this.tableDataTag))
          this.tableDataDesign = []
        } else {
          const data = {
            tag: r,
            parent_id: e.parent_id,
          }
          eduAddTag(data).then((k) => {
            let inputValue = k.data.title
            if (inputValue) {
              e.dynamicTags.push({
                tag: inputValue,
                id: k.data.id,
              })
            }
            e.inputVisible = false
            e.inputValue = ''
            e.parent_id = k.data.id
            this.tagOperatorList = []
            this.tableDataStrategy = JSON.parse(
              JSON.stringify(this.tableDataTag)
            )
            this.tableDatastrategy = JSON.parse(
              JSON.stringify(this.tableDataTag)
            )
            this.tableDataTarget = JSON.parse(JSON.stringify(this.tableDataTag))
            this.tableDataDesign = []
          })
        }
      },

      FamilyChange(e) {
        this.FamilyOptions.forEach((res) => {
          if (res.group_id == e) {
            this.userOptions = res.child
          }
        })
      },
      userChange(e) {
        // console.log(e)
        const params = {
          app_customer_id: e,
        }
        getCustomerCard(params).then((j) => {
          this.goodsOptions = j.data
        })
      },

      sbu() {
        const tableDataTag = JSON.parse(JSON.stringify(this.tableDataTag))
        tableDataTag.forEach((e) => {
          e.option = []
          e.dynamicTags.forEach((i) => {
            // console.log(i)/
            e.option.push({
              option_id: i.id,
              title: i.tag,
            })
          })
          delete e.dynamicTags
          delete e.inputValue
          delete e.inputVisible
          delete e.parent_id
        })

        const tableDatastrategy = JSON.parse(
          JSON.stringify(this.tableDatastrategy)
        )
        tableDatastrategy.forEach((e) => {
          e.option = []
          e.dynamicTags.forEach((i) => {
            // console.log(i)
            e.option.push({
              option_id: i.id,
              title: i.tag,
            })
          })
          e.strategy = []
          e.dynamicStrategy.forEach((k) => {
            e.strategy.push({
              strategy_id: k.id,
              title: k.strategy_text,
            })
          })
          delete e.dynamicStrategy
          delete e.dynamicTags
          delete e.inputValue
          delete e.inputVisible
          delete e.parent_id
        })
        const tableDataTarget = JSON.parse(JSON.stringify(this.tableDataTarget))

        tableDataTarget.forEach((e) => {
          e.option = []
          e.dynamicTags.forEach((i) => {
            // console.log(i)
            e.option.push({
              option_id: i.id,
              title: i.tag,
            })
          })

          e.objectives = []

          e.dynamicStrategy.forEach((k) => {
            e.objectives.push({
              objectives_id: k.id,
              title: k.objectives_text,
            })
          })
          delete e.dynamicStrategy
          delete e.dynamicTags
          delete e.inputValue
          delete e.inputVisible
          delete e.parent_id
        })
        const tableDataDesign = JSON.parse(JSON.stringify(this.tableDataDesign))
        tableDataDesign.forEach((e) => {
          // console.log(e)
          e.option_title = e.tagName
          e.option = []
          e.dynamicTags.forEach((i) => {
            console.log(i)
            e.option.push({
              option_id: i.id,
              title: i.tag,
            })
          })
          e.activity = []
          e.dynamicStrategy.forEach((j) => {
            // console.log(j)
            e.activity.push({
              objectives_id: j.id,
              objectives_text: j.objectives_text,
              data: j.data,
            })
          })
          delete e.dynamicStrategy
          delete e.dynamicTags
          delete e.inputValue
          delete e.inputVisible
          delete e.parent_id
          delete e.tagName
          // delete e.tag_id
        })
        const data = {
          option_id: tableDataTag,
          strategy: tableDatastrategy,
          objectives: tableDataTarget,
          activity: tableDataDesign,
          member_id: this.ruleForm.user,
          goods_id: this.ruleForm.goods_name,
          start_date: this.ruleForm.item[0],
          end_date: this.ruleForm.item[1],
          option_remark: this.tagD[0].value,
          group_id: this.ruleForm.Family,
          teaching: this.tableDataTeaching,
        }
        if (this.datas.id) {
          data.id = this.datas.id
        }
        // console.log(data)
        addPrepare(data).then((e) => {
          console.log(e)
          this.goBack()
        })
      },
      sbu1() {
        console.log(this.tableDataTeaching)
      },
    },
  }
</script>

<style scoped>
  .el-tag {
    white-space: normal;
    height: auto;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
